<script>
export default {
  data() {
    return {
      form: {},
      tableData: [],
      current: 1,
      pageSize: 10,
      total: 0,
      showTable:true,
      bq:[],
      options:[],
      ids:[],
      teams:[],
      baos:[],
      jgs:[],
    }
  },
  methods: {
    // 获取标签
    getbq() {
      this.axios.get(`http://localhost:8202/person/getBq`).then(res => {
        this.options = res.data.data;
      })
    },
    // 获取服务包
    getbao() {
      this.axios.get(`http://localhost:8202/person/bao`).then(res => {
        this.baos = res.data.data;
      })
    },
    // 获取机构
    getjg() {
      this.axios.get(`http://localhost:8202/person/jg`).then(res => {
        this.jgs = res.data.data;
      })
    },
    // 获取团队
    getteam() {
      this.axios.get(`http://localhost:8202/person/team`).then(res => {
        this.teams = res.data.data;
      })
    },

    // 跳转到详情页面
    tz(id){
      this.$router.push({path: '/jmxq', query: {id: id}})
    },
    // 改变每页最大
    handleSizeChange(val) {
      this.pageSize = val;
      this.findList()
    },

    // 改变当前页
    handleCurrentChange(val) {
      this.current = val;
      this.findList();
    },
    // 新增居民档案的方法
    addResident() {
      this.$router.push("/addJm");
    },
    // 导出数据的方法
    exportData() {
        //导出数据
        location.href='http://localhost:8202/person/outExcel';
    },

    //  模糊查询按钮
    search() {

    },

    //   查看详情
    viewDetails(row) {
      this.$router.push({path: '/jmxq', query: {id: row.id}})
    },
    //    编辑
    edit(row) {
      this.$router.push({path: '/jmxg', query: {id: row.id}})
    },
    //   发消息
    sendMessage(row) {
      this.$router.push({path: '/message', query: {id: row.id}})
    },
    //   添加服务
    addService(row) {
        this.$router.push({path: '/addView', query: {id: row.id}})
    },
    batchDeleteByIds(val,id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        if(val=='one'){
          //单个删除
          ids.push(id);
        }else{
          if(this.ids.length>0){
            for(let i=0;i<this.ids.length;i++){
              ids.push(this.ids[i].id);
            }
          }else{
            alert("请选择一条数据");
          }
        }
        //删除
        this.axios.get(`http://localhost:8202/person/delete?id=${ids}`).then(res=>{
          if(res.data.code==200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.findList();
          }else{
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //   获取居民信息
    findList() {
      if(this.bq.length>0){
        for (var i=0;i<this.bq.length;i++){
          this.form.bq = this.form.bq + "," + this.bq[i];
        }
      }
      this.axios.post(`http://localhost:8202/person/findList?current=${this.current}&pageSize=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (this.current > res.data.data.pages) {
          this.current = res.data.data.pages;
          this.findList();
        }
        this.form.bq="";
      })
    },


  //   切换展示的效果
    toggleView() {
      this.showTable =!this.showTable;
    },

    // 修改状态
    handleStatusChange(row){
      this.axios.post(`http://localhost:8202/person/updateStatus`,row).then(res=>{
        if(res.data.code==200){
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }else{
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }
      })
    }
  },
  created() {
    this.findList();
    this.getteam();
    this.getjg();
    this.getbao();
    this.getbq();
  }
}
</script>

<template>
  <div class="jmgl" >
    <router-view/>
    <el-row >
      <el-col :span="24" >
        <el-card style="width:100%;height: 100%;display: flex; flex-direction: column;">
          <el-header align="left"> | 服务项目管理</el-header>
          <el-row style="display: flex; flex-wrap: wrap;">
            <el-col :span="6" style="background-color: white;width: 25%; " >
              <span style="font-size: 16px;color: gray">签约状态：</span>
              <el-select placeholder="签约状态" style="width: 200px" v-model="form.qystatus">
                <el-option label="请选择" value=""></el-option>
                <el-option label="已签约" value="1"></el-option>
                <el-option label="已过期" value="0"></el-option>
                <el-option label="未签约" value="2"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="background-color: white">
              <span style="font-size: 16px;color: gray">签约机构：</span>
              <el-select style="width: 200px" v-model="form.qyjg" placeholder="签约机构">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in jgs" :label="item.organization" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="background-color: white">
              <span style="font-size: 16px;color: gray">医生团队：</span>
              <el-select style="width: 200px" v-model="form.ystd" placeholder="医生团队">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in teams" :label="item.teamname" :value="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="background-color: white;margin-top: 10px">
              <el-button type="success" style="float: right;width: 60px" @click="exportData">导出</el-button>
              <el-button type="primary" style="float: right; margin-right: 10px;width: 150px" @click="addResident">新增居民档案
              </el-button>


            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" style="background-color: white">
              <span style="font-size: 16px;color: gray">服务包：</span>
              <el-select style="width: 200px" v-model="form.fwb" placeholder="服务包">
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in baos" :label="item.name" :value="item.id"></el-option>

              </el-select>
            </el-col>
            <el-col :span="6" style="background-color: white">
              <span style="font-size: 16px;color: gray">居民标签：</span>
              <el-select v-model="bq" multiple placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :label="item.name"
                    :value="item.name"
                >

                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" style="background-color: white">
              <el-input placeholder="请输入关键字" v-model="form.name" style="width: 380px;margin-left: 30px"
                        suffix-icon="el-icon-search" @keyup.enter="search()"></el-input>
            </el-col>
          <p style="float: right;margin-right: 20px">
            <el-button type="primary" @click="findList">搜索</el-button>
            <i class="el-icon-s-fold" @click="toggleView"></i>
            <i class="el-icon-s-grid"></i>
          </p>

          </el-row>


          <!--            表格部分-->
          <div v-if="showTable">
          <el-table :data="tableData" style="text-align: center">
            <el-table-column
                type="selection"

                width="50"
                align="center">
            </el-table-column>
            <el-table-column  align="center" prop="id" label="编号" width="150"></el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column align="center" prop="sfz" label="身份证号" width="220"></el-table-column>
            <el-table-column  align="center" prop="sjh" label="手机号" width="150"></el-table-column>
            <el-table-column align="center" label="签约状态" width="130">
              <template slot-scope="scope">
                <font color="#7fff00" v-show="scope.row.qystatus==1"> 签约中</font>
                <font color="red" v-show="scope.row.qystatus==0"> 已过期</font>
                <font color="aqua" v-show="scope.row.qystatus==2"> 未签约</font>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="bq" label="用户标签" width="170">
<!--              <template slot-scope="scope">-->

<!--                <span v-for="(item,index) in chaifen(scope.row.bq)">{{ item }}&nbsp;</span>-->
<!--              </template>-->
            </el-table-column>
            <el-table-column align="center" prop="residentStatus" label="居民状态" width="150">
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.jmstatus"
                    active-color="#13ce66"
                    inactive-color=""
                    :active-value="1"
                    :inactive-value="0"
                    @change="handleStatusChange(scope.row)"
                ></el-switch>
                <span v-if="scope.row.jmstatus" class="switch-text">启用</span>
                <span v-else class="switch-text2">禁用</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" style="width: 70px" @click="viewDetails(scope.row)">查看详情</el-button>
                <el-button type="text" size="small" style="width: 70px" @click="edit(scope.row)">编辑</el-button>
<!--                <el-button type="text" size="small" style="width: 70px" @click="sendMessage(scope.row)">发消息</el-button>-->
                <el-button type="text" size="small" style="width: 70px" @click="addService(scope.row)">添加服务</el-button>
                <el-button type="text" size="small" style="width: 70px" @click="batchDeleteByIds('one',scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>


          <div   v-else="showTable" style="margin-top: 15px;display: flex;width: 1640px; flex-wrap: wrap;margin-left: 60px">
            <el-row v-for="(item,index) in tableData" style="padding: 20px;float:left;" >
              <a @click="tz(item.id)">
                <el-card @click="tz(item.id)" style="width: 246px;height: 270px;float: left;">
                  <img :src="item.img" alt="" style="width: 100px; height: 100px;">
                  <p style="height: 25px;">{{item.name}}&nbsp;<font color="#a9a9a9" size="1px">{{item.age}}岁</font></p>
                  <p style="height: 35px"><font color="#7fff00" v-show="item.qystatus==1" size="2px"> 签约中</font>
                    <font color="red" v-show="item.qystatus==0" size="2px"> 已过期</font></p>
                  <span style="font-size: 12px" >{{item.bq}}&nbsp;</span>
                </el-card>
              </a>
            </el-row>
          </div>

          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>


        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style>
.custom-switch-wrapper {
  position: relative;
}

.switch-text {
  position: absolute;
  left: 58px;
  top: 53%;
  transform: translateY(-50%);
  color: white;
  font-size: 9px;
}

.switch-text2 {
  position: absolute;
  left: 73px;
  top: 52%;
  transform: translateY(-50%);
  color: black;
  font-size: 9px;
}




</style>

